import { Button, Flex, Typography } from 'antd';
import React from 'react';
import styles from './Guide.less';

interface Props {
}

// 脚手架示例组件
const Guide: React.FC<Props> = (props) => {
  const stateGame = '比赛中';
  const offSize = '30';
  const allSize = '60';
  
  return (
    <Flex
      vertical
      style={{ backgroundColor: '#fff', padding: 10, borderRadius: 6 }}
    >
      当前赛事
      <Typography.Title level={2} className={styles.title}>
        {'xxxxxxxxxxxxxxx'}
      </Typography.Title>
      <Flex style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Typography.Title level={4} type="success">
          {stateGame}
        </Typography.Title>
        <Typography.Title level={5}>报名人数</Typography.Title>
        <Typography.Title level={5} type="danger">
          {offSize}
        </Typography.Title>
        <Typography.Title level={5}>/{allSize}</Typography.Title>
      </Flex>
      <Button type="primary">点击进入赛事</Button>
    </Flex>
  );
};

export default Guide;
